<template>
  <div id="container">
    <el-form
      label-position="left"
      ref="addForm"
      :model="editForm"
      label-width="100px"
    >
      <el-form-item label="海报上传" style="margin-bottom: 40px">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-change="uploadChange"
          :on-progress="uploadPreview"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          action="http://localhost:9999/upload?flag=2"
          list-type="picture-card"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button
          :disabled="isDisabled"
          style="margin-top: 20px"
          type="primary"
          @click="uploadImg"
          >点击上传</el-button
        >
      </el-form-item>
      <el-form-item label="导演姓名" prop="directorName">
        <el-input v-model="editForm.directorName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editForm: {},
      imgUrl: "",
      isDisabled: true,
    };
  },
  created() {
    this.editForm.directorId = this.$route.query.id;
    this.getDirectorById(this.$route.query.id);
  },
  methods: {
    async getDirectorById(id) {
      const { data: res } = await this.$http.get(
        "common/director/getDirectorById",
        { params: { id: id } }
      );
      if (res.code != 200) {
        return this.message.error(res.message);
      } else {
        this.editForm = res.data;
        this.imgUrl = res.data.directorPhoto;
      }
    },
    uploadImg() {
      this.$refs.upload.submit();
    },
    uploadChange(file, fileList) {
      console.log(file);
      this.imgUrl = file.url;
      this.isDisabled = false;
    },
    uploadPreview(event, file, fileList) {},
    uploadSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.$message.success(res.message);
      this.editForm.directorPhoto = res.data.url;
    },
    uploadError(err) {
      alert(3);
      alert(err);
    },
    async submitForm() {
      const { data: res } = await this.$http.put(
        "common/director/editDirector",
        this.editForm
      );
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.$router.push("/director");
      }
    },
    handlePictureCardPreview() {},
    handleRemove() {},
  },
};
</script>
<style lang="less" scoped>
.avatar {
  width: 140px;
  height: 166px;
}
</style>